<template>
  <div class="image-upload">
    <h2 class="page-title">图片上传</h2>

    <div class="upload-card">
      <van-uploader
          v-model="fileList"
          :after-read="afterRead"
          :max-count="1"
          accept="image/*"
      >
        <template #default>
          <div class="upload-area">
            <van-icon name="photograph" size="50" color="#1989fa" />
            <p>点击选择图片</p>
          </div>
        </template>
      </van-uploader>

      <div v-if="imageData" class="preview-container">
        <h3>图片预览</h3>
        <div class="image-preview">
          <img :src="imageData" alt="预览图片" ref="previewImage" />
        </div>

        <div class="crop-controls">
          <van-button type="primary" @click="cropImage">裁剪图片</van-button>
          <van-button type="default" @click="resetImage">重新选择</van-button>
        </div>
      </div>

      <div v-if="croppedImage" class="result-container">
        <h3>裁剪结果</h3>
        <div class="cropped-image">
          <img :src="croppedImage" alt="裁剪后的图片" />
        </div>

        <div class="upload-controls">
          <van-button type="primary" block @click="uploadImage">上传图片</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { Toast } from 'vant'
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'

export default {
  setup() {
    // 图片上传相关
    const fileList = ref([])
    const imageData = ref(null)
    const croppedImage = ref(null)
    const previewImage = ref(null)
    let cropper = null

    // 图片选择后的回调
    const afterRead = (file) => {
      // 创建文件URL用于预览
      imageData.value = file.content
      croppedImage.value = null

      // 初始化Cropper
      if (cropper) {
        cropper.destroy()
      }

      setTimeout(() => {
        if (previewImage.value) {
          cropper = new Cropper(previewImage.value, {
            aspectRatio: 16 / 9,
            viewMode: 1,
            autoCropArea: 0.8,
            guides: true,
            background: false
          })
        }
      }, 100)
    }

    // 裁剪图片
    const cropImage = () => {
      if (!imageData.value) {
        Toast('请先选择图片')
        return
      }

      if (cropper) {
        const canvas = cropper.getCroppedCanvas({
          width: 800,
          height: 450
        })

        croppedImage.value = canvas.toDataURL('image/jpeg')
        Toast.success('图片裁剪完成')
      }
    }

    // 重置图片
    const resetImage = () => {
      fileList.value = []
      imageData.value = null
      croppedImage.value = null
      if (cropper) {
        cropper.destroy()
        cropper = null
      }
    }

    // 上传图片
    const uploadImage = () => {
      if (!croppedImage.value) {
        Toast('请先裁剪图片')
        return
      }

      Toast.loading({
        message: '上传中...',
        duration: 1500,
        onClose: () => {
          Toast.success('图片上传成功')
          // 重置状态
          resetImage()
        }
      })
    }

    return {
      fileList,
      imageData,
      croppedImage,
      previewImage,
      afterRead,
      cropImage,
      resetImage,
      uploadImage
    }
  }
}
</script>

<style scoped>
.page-title {
  padding: 20px 0 15px;
  font-size: 24px;
  font-weight: 600;
  color: #1989fa;
}

.upload-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  padding: 20px;
}

.upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  border: 2px dashed #1989fa;
  border-radius: 8px;
  background-color: #f9f9f9;
  color: #1989fa;
  cursor: pointer;
}

.preview-container, .result-container {
  margin-top: 20px;
}

.preview-container h3, .result-container h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.image-preview {
  width: 100%;
  height: 300px;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 15px;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cropped-image {
  width: 100%;
  height: 250px;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 15px;
}

.cropped-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.crop-controls, .upload-controls {
  display: flex;
  gap: 15px;
  margin-top: 15px;
}
</style>